<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
	<link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor); height: 50rem;">
    <!-- playground-fold-end -->
    <ui5-navigation-layout id="navigation-layout">
        <ui5-shellbar slot="header" id="shellbar"
            notifications-count="10" show-notifications show-product-switch >
			<ui5-shellbar-branding slot="branding">
				VEGA CRM
				<img slot="logo" src="../assets/images/sap-logo-svg.svg" />
			</ui5-shellbar-branding>
            <ui5-button id="menu-button" icon="menu2" slot="startButton" tooltip="Toggle side navigation"></ui5-button>
            <ui5-tag design="Set2" color-scheme="7" slot="content" data-hide-order="2">Trial</ui5-tag>
            <ui5-text slot="content" data-hide-order="1">30 days remaining</ui5-text>

            <ui5-shellbar-spacer slot="content"></ui5-shellbar-spacer>

            <ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>

			<ui5-shellbar-search slot="searchField" id="search-scope" show-clear-icon placeholder="Search Apps, Products">
				<ui5-search-scope text="All" selected slot="scopes"></ui5-search-scope>
				<ui5-search-scope text="Apps" slot="scopes"></ui5-search-scope>
				<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
			</ui5-shellbar-search>

            <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
            <ui5-avatar slot="profile">
                <img src="../assets/images/avatars/man_avatar_3.png" />
            </ui5-avatar>
        </ui5-shellbar>

		<ui5-user-menu id="userMenu" show-manage-account show-other-accounts show-edit-accounts show-edit-button>
			<ui5-user-menu-account slot="accounts"
								   avatar-src="../assets/images/avatars/man_avatar_3.png"
								   title-text="Alain Chevalier 1"
								   subtitle-text="alian.chevalier@sap.com"
								   description="Delivery Manager, SAP SE"
								   selected>
			</ui5-user-menu-account>
			<ui5-user-menu-account slot="accounts"
								   avatar-initials="SD"
								   title-text="John Walker"
								   subtitle-text="john.walker@sap.com"
								   description="Project Manager">
			</ui5-user-menu-account>
			<ui5-user-menu-account slot="accounts"
								   avatar-initials="DS"
								   title-text="David Wilson"
								   subtitle-text="david.wilson@sap.com"
								   description="Project Manager">
			</ui5-user-menu-account>
			<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
			<ui5-user-menu-item icon="official-service" text="Legal Information">
				<ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
				<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
			</ui5-user-menu-item>
			<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
		</ui5-user-menu>

        <ui5-side-navigation id="side-navigation" class="sideNavigation" slot="sideContent" accessible-name="Main">
            <ui5-side-navigation-item text="Home" icon="home" selected></ui5-side-navigation-item>
            <ui5-side-navigation-item text="Favorites" expanded icon="favorite-list" unselectable>
                <ui5-side-navigation-sub-item text="My Accounts"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="My Orders"></ui5-side-navigation-sub-item>
            </ui5-side-navigation-item>
            <ui5-side-navigation-item text="Customer Management" icon="account" expanded unselectable>
                <ui5-side-navigation-sub-item text="Contacts"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Companies"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Partners"></ui5-side-navigation-sub-item>
            </ui5-side-navigation-item>
            <ui5-side-navigation-item text="Sales" icon="crm-sales" expanded unselectable>
                <ui5-side-navigation-sub-item text="Leads"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Opportunuties"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Quotes"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Orders"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Invoices"></ui5-side-navigation-sub-item>
            </ui5-side-navigation-item>
            <ui5-side-navigation-item text="Products" icon="s4hana" expanded unselectable>
                <ui5-side-navigation-sub-item text="Product Catalog"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Pricing"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Inventory Management"></ui5-side-navigation-sub-item>
            </ui5-side-navigation-item>
            <ui5-side-navigation-item text="Marketing" icon="business-by-design" expanded unselectable>
                <ui5-side-navigation-sub-item text="Campaigns"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="E-Mail Marketing"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Marketing Automation"></ui5-side-navigation-sub-item>
            </ui5-side-navigation-item>
            <ui5-side-navigation-item text="Reports" icon="manager-insight" expanded unselectable>
                <ui5-side-navigation-sub-item text="Sales Reports"></ui5-side-navigation-sub-item>
                <ui5-side-navigation-sub-item text="Customer Reports"></ui5-side-navigation-sub-item>
            </ui5-side-navigation-item>
            <ui5-side-navigation-item slot="fixedItems" id="quick-create" text="Quick Create" icon="add" design="Action" unselectable></ui5-side-navigation-item>
            <ui5-side-navigation-item slot="fixedItems" text="Product Settings" icon="settings"></ui5-side-navigation-item>
        </ui5-side-navigation>

        <div class="mainContent">
            <ui5-title id="content-title">Home</ui5-title>
            <br />
            <ui5-text>
                Content...
            </ui5-text>
        </div>
    </ui5-navigation-layout>

    <ui5-dialog id="quick-create-dialog" class="quickCreateDialog" header-text="Create New Item" draggable resizable>
        <ui5-text>Create new item...</ui5-text>
        <ui5-bar slot="footer" design="Footer">
            <ui5-button slot="endContent" design="Emphasized">Create</ui5-button>
            <ui5-button slot="endContent" id="quick-create-dialog-close">Close</ui5-button>
        </ui5-bar>
    </ui5-dialog>

    <ui5-responsive-popover
		id="popover-with-notifications"
		placement="Bottom"
		class="notificationsPopover"
		horizontal-align="End">
		<div class="notificationsPopoverHeader" slot="header">
			<ui5-bar class="notificationsPopoverBar"
					 design="Header">
				<ui5-title level="H5" slot="startContent">Notifications</ui5-title>
				<ui5-button id="clear-all" design="Transparent" slot="endContent">Clear All</ui5-button>
				<ui5-button id="btn-sort" design="Transparent" icon="sort" tooltip="Sort" slot="endContent"></ui5-button>
				<ui5-button design="Transparent" icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
			</ui5-bar>
		</div>

		<ui5-notification-list class="notificationsPopoverList">
			<ui5-li-notification-group id="notificationsListGroupGrowing"
									   title-text="Today"
									   loading-delay="0"
									   growing="Button">
				<ui5-li-notification title-text="Start Your Day with Your Sales Target!"
									 show-close>
					<ui5-avatar icon="crm-sales" color-scheme="Accent10" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Sales</span>
					<span slot="footnotes">11:13</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					Good morning! Don’t forget your daily sales target is $2,000, which needs to be fulfilled by the end of the business day. Let’s make it a great sales day!
				</ui5-li-notification>
				<ui5-li-notification title-text="Upcoming Client Meeting Reminder"
									importance="Important"
									show-close>
					<ui5-avatar icon="crm-sales" color-scheme="Accent10" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Sales</span>
					<span slot="footnotes">11:05</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Open in calendar"></ui5-menu-item>
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					You have a client meeting scheduled at 3 PM today with Acme Corp. Location: Zoom - link in calendar.
				</ui5-li-notification>
				<ui5-li-notification title-text="Follow-Up Needed for Prospect"
									 show-close>
					<ui5-avatar icon="crm-sales" color-scheme="Accent10" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Sales</span>
					<span slot="footnotes">11:00</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Follow-up meeting"></ui5-menu-item>
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					Reminder to follow up with John Doe from XYZ Ltd. Discuss the proposal sent last week.
				</ui5-li-notification>
				<ui5-li-notification title-text="Budget Report Submission Deadline Approaching"
									importance="Important"
									show-close>
					<ui5-avatar icon="expense-report" color-scheme="Accent1" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Accountant</span>
					<span slot="footnotes">10:15</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					Reminder: The deadline to submit this quarter’s budget report is this Friday.
				</ui5-li-notification>
				<ui5-li-notification title-text="Urgent: Expense Claims Pending Your Approval"
									importance="Important"
									show-close>
					<ui5-avatar icon="expense-report" color-scheme="Accent1" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Notification</span>
					<span slot="footnotes">09:30</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					You have 5 pending expense claims awaiting your approval. Please review them by EOD.
				</ui5-li-notification>
				<ui5-li-notification title-text="Monthly Reconciliation Process Begins Next Week"
									 show-close>
					<ui5-avatar icon="expense-report" color-scheme="Accent1" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Accountant</span>
					<span slot="footnotes">09:30</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					Just a heads-up that we will begin the financial reconciliation process for this month next Monday.
				</ui5-li-notification>
			</ui5-li-notification-group>

			<ui5-li-notification-group title-text="Yesterday" collapsed>
				<ui5-li-notification title-text="New Sales Lead Assigned"
									 show-close>
					<ui5-avatar icon="crm-sales" color-scheme="Accent10" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Sales</span>
					<span slot="footnotes">1 Day</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					A new lead, Jane Smith from Innovative Tech, has been assigned to you. Contact details in CRM.
				</ui5-li-notification>
				<ui5-li-notification title-text=" Reminder: Submit Your EOD Sales Report"
									 show-close>
					<ui5-avatar icon="crm-sales" color-scheme="Accent10" shape="Square" size="XS" slot="avatar"></ui5-avatar>
					<span slot="footnotes">Sales</span>
					<span slot="footnotes">1 Day</span>
					<ui5-menu slot="menu">
						<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
					</ui5-menu>
					Please submit your end-of-day sales report through the portal before logging off today.
			</ui5-li-notification>
			<ui5-li-notification title-text="Tax Filing Deadline Reminder"
								 show-close>
				<ui5-avatar icon="expense-report" color-scheme="Accent1" shape="Square" size="XS" slot="avatar"></ui5-avatar>
				<span slot="footnotes">Accountant</span>
				<span slot="footnotes">1 Day</span>
				<ui5-menu slot="menu">
					<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
				</ui5-menu>
				Reminder: The tax filing deadline for this quarter is approaching in two weeks.
			</ui5-li-notification>
			<ui5-li-notification title-text=" Invoice Processing Completed"
								 show-close>
				<ui5-avatar icon="expense-report" color-scheme="Accent1" shape="Square" size="XS" slot="avatar"></ui5-avatar>
				<span slot="footnotes">Notification</span>
				<span slot="footnotes">1 Day</span>
				<ui5-menu slot="menu">
					<ui5-menu-item text="Unsubscribe"></ui5-menu-item>
				</ui5-menu>
				All invoices for this month have been successfully processed and payments scheduled.
			</ui5-li-notification>
			</ui5-li-notification-group>
		</ui5-notification-list>
	</ui5-responsive-popover>
	<ui5-menu header-text="Sort By" id="sort-menu">
		<ui5-menu-item text="Date"></ui5-menu-item>
		<ui5-menu-item text="Importance"></ui5-menu-item>
	</ui5-menu>

	<ui5-dialog id="clear-all-dialog" header-text="Clear All Notifications">
		<ui5-text>Are you sure you want to clear all the notifications?</ui5-text>
		<ui5-bar slot="footer" design="Footer">
			<ui5-button id="clear-all-action" class="dialogCloser" design="Emphasized" slot="endContent"
				style="min-width: 4rem;">OK</ui5-button>
			<ui5-button class="dialogCloser" slot="endContent"
				style="min-width: 4rem;">Cancel</ui5-button>
		</ui5-bar>
	</ui5-dialog>


	<ui5-user-settings-dialog id="settings" header-text="Settings" show-search-field>
		<ui5-user-settings-item icon="user-settings" text="User Account" tooltip="User Account" header-text="User Account">
			<ui5-user-settings-account-view show-manage-account="true">
				<ui5-user-menu-account slot="account"
									   avatar-src="../assets/images/avatars/man_avatar_3.png"
									   title-text="Alain Chevalier"
									   subtitle-text="alian.chevalier@sap.com"
									   description="Delivery Manager, SAP SE"
									   selected>
				</ui5-user-menu-account>
				<ui5-label for="reset-all-button">Personalization</ui5-label><br/>
				<ui5-button id="reset-all-button">Reset All Personalization</ui5-button>
				<ui5-panel fixed class="ua-panel">
					<ui5-text>
						Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content).
					</ui5-text>
				</ui5-panel>

			</ui5-user-settings-account-view>
		</ui5-user-settings-item>

		<ui5-user-settings-item icon="palette" text="Appearance" tooltip="Appearance" header-text="Appearance">
			<ui5-user-settings-view text="Themes" slot="tabs">
				<ui5-list separators="Inner" selection-mode="Single">
					<ui5-li icon="palette" selected>SAP Morning Horizon</ui5-li>
					<ui5-li icon="palette">SAP Evening Horizon</ui5-li>
					<ui5-li icon="palette">SAP High Contrast Black (SAP Horizon)</ui5-li>
					<ui5-li icon="palette">SAP High Contrast White (SAP Horizon)</ui5-li>
				</ui5-list>
				<ui5-button id="themeSave" class="save-btn" design="Emphasized">Save</ui5-button>
				<ui5-toast id="toastThemeSave">Changes applied.</ui5-toast>
			</ui5-user-settings-view>
			<ui5-user-settings-view text="Display settings" slot="tabs">
				<ui5-checkbox checked text="Optimized for Touch Input"></ui5-checkbox>
				<ui5-panel fixed>
					<ui5-label>
						Increases the size and spacing of controls to allow you to interact with them more easily using your fingertip.
						This is useful for hybrid devices that combine touch and mouse events.
					</ui5-label>
				</ui5-panel>
			</ui5-user-settings-view>
		</ui5-user-settings-item>

		<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">
			<ui5-user-settings-view>
				<div id="language-region-container" class="language-region-container">
					<ui5-label class="language-region-label">Display Language:</ui5-label>
					<ui5-combobox id="language" class="language-region-control" placeholder="Language" value="English (United States)">
						<ui5-cb-item text="Browser Language" selected additional-text="English"></ui5-cb-item>
						<ui5-cb-item text="English (United Kingdom)" additional-text="English (United Kingdom)"></ui5-cb-item>
						<ui5-cb-item text="English (United States)" additional-text="English (United States)"></ui5-cb-item>
						<ui5-cb-item text="French (France)" additional-text="Français (France)"></ui5-cb-item>
						<ui5-cb-item text="French (Canada)" additional-text="Français (Canada)"></ui5-cb-item>
						<ui5-cb-item text="German (Germany)" additional-text="Deutsch (Deutschland)"></ui5-cb-item>
						<ui5-cb-item text="German (Switzerland)" additional-text="Deutsch (Schweiz)"></ui5-cb-item>
						<ui5-cb-item text="Japanese" additional-text="日本語 (日本)"></ui5-cb-item>
						<ui5-cb-item text="Portuguese (Brazil)" additional-text="Português (Brasil)" ></ui5-cb-item>
						<ui5-cb-item text="Simplified Chinese (China)" additional-text="简体中文（中国)"></ui5-cb-item>
						<ui5-cb-item text="Spanish (Mexico)" additional-text="Español (América Latina)"></ui5-cb-item>
						<ui5-cb-item text="Spanish (Spain)" additional-text="Español (España)"></ui5-cb-item>
					</ui5-combobox>
					<ui5-label class="language-region-label">Region:</ui5-label>
					<ui5-combobox id="region" class="language-region-control" placeholder="Region" value="United States">
						<ui5-cb-item text="United Kingdom" additional-text="GB"></ui5-cb-item>
						<ui5-cb-item text="United States" additional-text="US"></ui5-cb-item>
						<ui5-cb-item text="French (France)" additional-text="FR"></ui5-cb-item>
						<ui5-cb-item text="French (Canada)" additional-text="CA"></ui5-cb-item>
						<ui5-cb-item text="German (Germany)" additional-text="DE"></ui5-cb-item>
						<ui5-cb-item text="German (Switzerland)" additional-text="CH" ></ui5-cb-item>
						<ui5-cb-item text="Japanese" additional-text="JP"></ui5-cb-item>
						<ui5-cb-item text="Portuguese (Brazil)" additional-text="BR"></ui5-cb-item>
						<ui5-cb-item text="Simplified Chinese (China)" additional-text="CN"></ui5-cb-item>
						<ui5-cb-item text="Spanish (Mexico)" additional-text="MX"></ui5-cb-item>
						<ui5-cb-item text="Spanish (Spain)" additional-text="ES"></ui5-cb-item>
					</ui5-combobox>
					<ui5-label class="language-region-label">Date Format:</ui5-label>
					<ui5-combobox  id="dateFormat" class="language-region-control" placeholder="Date Format" value="MM.DD.YYYY">
						<ui5-cb-item text="MM/DD/YYYY" additional-text="e.g. 10/23/2025"></ui5-cb-item>
						<ui5-cb-item text="MM.DD.YYYY" additional-text="e.g. 10.23.2025"></ui5-cb-item>
						<ui5-cb-item text="MM-DD-YYYY" additional-text="e.g. 10-23-2025"></ui5-cb-item>
						<ui5-cb-item text="DD/MM/YYYY" additional-text="e.g. 23/10/2025"></ui5-cb-item>
						<ui5-cb-item text="DD.MM.YYYY" additional-text="e.g. 23.10.2025"></ui5-cb-item>
						<ui5-cb-item text="DD-MM-YYYY" additional-text="e.g. 23-10-2025"></ui5-cb-item>
						<ui5-cb-item text="YYYY/MM/DD" additional-text="e.g. 2025/10/23"></ui5-cb-item>
						<ui5-cb-item text="YYYY.MM.DD" additional-text="e.g. 2025.10.23"></ui5-cb-item>
						<ui5-cb-item text="YYYY-MM-DD" additional-text="e.g. 2025-10-23"></ui5-cb-item>
					</ui5-combobox>
					<ui5-label class="language-region-label">Time Format:</ui5-label>
					<ui5-combobox id="timeFormat" class="language-region-control" placeholder="Time Format" value="12 Hour">
						<ui5-cb-item text="24 Hour" additional-text="e.g. 12:05:10"></ui5-cb-item>
						<ui5-cb-item text="12 Hour" additional-text="e.g. 12:05:10 PM"></ui5-cb-item>
						<ui5-cb-item text="12 Hour (lowercase)" additional-text="e.g. 12:05:10 pm"></ui5-cb-item>
						<ui5-cb-item text="Hours from 0 to 11" additional-text="e.g. 00:05:10 PM"></ui5-cb-item>
						<ui5-cb-item text="Hours from 0 to 11 (lowercase)" additional-text="e.g. 00:05:10 pm"></ui5-cb-item>
					</ui5-combobox>
					<ui5-label class="language-region-label">Time Zone:</ui5-label>
					<ui5-combobox id="timeZone" class="language-region-control" placeholder="Time Zone" value="Eastern Standard Time (UTC -05:00)">
						<ui5-cb-item text="Pacific Time (UTC -08:00)" additional-text="Sacramento, United States"></ui5-cb-item>
						<ui5-cb-item text="Mountain Time (UTC -07:00)" additional-text="Denver, United States"></ui5-cb-item>
						<ui5-cb-item text="Central Time (UTC -06:00)" additional-text="Austin, United States"></ui5-cb-item>
						<ui5-cb-item text="Eastern Standard Time (UTC -05:00)" additional-text="Washington, United States"></ui5-cb-item>
						<ui5-cb-item text="Atlantic Time (UTC -04:00)" additional-text="Halifax, Canada"></ui5-cb-item>
						<ui5-cb-item text="Newfoundland Time (UTC -03:30)" additional-text="St. John's, Canada"></ui5-cb-item>
						<ui5-cb-item text="Brasilia Time (UTC -03:00)" additional-text="Brasília, Brazil"></ui5-cb-item>
						<ui5-cb-item text="Argentina Time (UTC -03:00)" additional-text="Buenos Aires, Argentina"></ui5-cb-item>
						<ui5-cb-item text="Greenwich Mean Time (UTC +00:00)" additional-text="London, United Kingdom"></ui5-cb-item>
						<ui5-cb-item text="Central European Time (UTC +01:00)" additional-text="Berlin, Germany"></ui5-cb-item>
						<ui5-cb-item text="Eastern European Time (UTC +02:00)" additional-text="Athens, Greece"></ui5-cb-item>
						<ui5-cb-item text="Turkey Time (UTC +03:00)" additional-text="Ankara, Türkiye"></ui5-cb-item>
						<ui5-cb-item text="Arabian Time (UTC +04:00)" additional-text="Abu Dhabi, United Arab Emirates"></ui5-cb-item>
						<ui5-cb-item text="Pakistan Standard Time (UTC +05:00)" additional-text="Islamabad, Pakistan"></ui5-cb-item>
						<ui5-cb-item text="India Standard Time (UTC +05:30)" additional-text="New Delhi, India"></ui5-cb-item>
						<ui5-cb-item text="Bangladesh Standard Time (UTC +06:00)" additional-text="Dhaka, Bangladesh"></ui5-cb-item>
						<ui5-cb-item text="Indochina Time (UTC +07:00)" additional-text="Bangkok, Thailand"></ui5-cb-item>
						<ui5-cb-item text="China Standard Time (UTC +08:00)" additional-text="Beijing, China"></ui5-cb-item>
						<ui5-cb-item text="Singapore Time (UTC +08:00)" additional-text="Singapore, Singapore"></ui5-cb-item>
						<ui5-cb-item text="Hong Kong Time (UTC +08:00)" additional-text="Hong Kong, China"></ui5-cb-item>
						<ui5-cb-item text="Japan Standard Time (UTC +09:00)" additional-text="Tokyo, Japan"></ui5-cb-item>
						<ui5-cb-item text="Korea Standard Time (UTC +09:00)" additional-text="Seoul, South Korea"></ui5-cb-item>
						<ui5-cb-item text="Australian Eastern Time (UTC +10:00)" additional-text="Canberra, Australia"></ui5-cb-item>
						<ui5-cb-item text="New Zealand Time (UTC +12:00)" additional-text="Wellington, New Zealand"></ui5-cb-item>
					</ui5-combobox>
					<ui5-label class="language-region-label">Currency:</ui5-label>
					<ui5-combobox id="currency" class="language-region-control" placeholder="Currency" value="USD - United States Dollar">
						<ui5-cb-item text="USD - United States Dollar" additional-text="USD" value="USD"></ui5-cb-item>
						<ui5-cb-item text="Euro" additional-text="EUR"></ui5-cb-item>
						<ui5-cb-item text="British Pound" additional-text="GBP"></ui5-cb-item>
						<ui5-cb-item text="Japanese Yen" additional-text="JPY"></ui5-cb-item>
						<ui5-cb-item text="Swiss Franc" additional-text="CHF"></ui5-cb-item>
						<ui5-cb-item text="Canadian Dollar" additional-text="CAD"></ui5-cb-item>
						<ui5-cb-item text="Australian Dollar" additional-text="AUD"></ui5-cb-item>
						<ui5-cb-item text="New Zealand Dollar" additional-text="NZD"></ui5-cb-item>
						<ui5-cb-item text="Chinese Yuan Renminbi" additional-text="CNY"></ui5-cb-item>
						<ui5-cb-item text="Indian Rupee" additional-text="INR"></ui5-cb-item>
						<ui5-cb-item text="Brazilian Real" additional-text="BRL"></ui5-cb-item>
						<ui5-cb-item text="South African Rand" additional-text="ZAR"></ui5-cb-item>
						<ui5-cb-item text="Russian Ruble" additional-text="RUB"></ui5-cb-item>
						<ui5-cb-item text="Mexican Peso" additional-text="MXN"></ui5-cb-item>
						<ui5-cb-item text="Singapore Dollar" additional-text="SGD"></ui5-cb-item>
						<ui5-cb-item text="Hong Kong Dollar" additional-text="HKD"></ui5-cb-item>
						<ui5-cb-item text="Norwegian Krone" additional-text="NOK"></ui5-cb-item>
						<ui5-cb-item text="Swedish Krona" additional-text="SEK"></ui5-cb-item>
						<ui5-cb-item text="South Korean Won" additional-text="KRW"></ui5-cb-item>
						<ui5-cb-item text="Turkish Lira" additional-text="TRY"></ui5-cb-item>
					</ui5-combobox>
					<ui5-label class="language-region-label">Number Format:</ui5-label>
					<ui5-combobox id="numberFormat" class="language-region-control" placeholder="Number Format" value="1,234.56">
						<ui5-cb-item text="1.234,56" additional-text="Germany"></ui5-cb-item>
						<ui5-cb-item text="1,234.56" additional-text="US/UK"></ui5-cb-item>
						<ui5-cb-item text="1 234,56" additional-text="France"></ui5-cb-item>
						<ui5-cb-item text="1'234.56" additional-text="Switzerland"></ui5-cb-item>
						<ui5-cb-item text="1234,56" additional-text="SI/SO Format"></ui5-cb-item>
					</ui5-combobox>
				</div>
			</ui5-user-settings-view>
		</ui5-user-settings-item>


		<ui5-user-settings-item icon="iphone" text="SAP Mobile Start Application" tooltip="SAP Mobile Start Application" header-text="SAP Mobile Start Application">
			<ui5-user-settings-view>
				<ui5-button id="mobile1-button">iOS</ui5-button>
				<ui5-button id="mobile2-button">Android</ui5-button>
			</ui5-user-settings-view>

			<ui5-user-settings-view text="Inner Page" id="mobile-second-page" secondary>
				<ui5-text>Enable access to your site from the SAP Mobile Start application.</ui5-text>
				<ui5-button id="mobile-install">Install</ui5-button><ui5-button id="mobile-register">Register</ui5-button>
				<ui5-text>Scan the QR Code to install the mobile application</ui5-text>
				<ui5-icon name="qr-code" style="width: 20rem; height: 20rem;"></ui5-icon>
			</ui5-user-settings-view>
		</ui5-user-settings-item>

		<ui5-user-settings-item icon="bell" text="Notifications" tooltip="Notifications" header-text="Notifications">
			<ui5-user-settings-view>
				<ui5-checkbox checked text="Show High-Priority Notification Alerts"></ui5-checkbox>
			</ui5-user-settings-view>
		</ui5-user-settings-item>

		<ui5-user-settings-item icon="reset" slot="fixedItems" text="Reset Settings" tooltip="Reset Settings" header-text="Reset Settings">
			<ui5-user-settings-view text="Reset Personalization">
				<ui5-button id="resetPersonalization">Reset Personalization content</ui5-button>
				<ui5-toast id="toastReset">Changes Reset.</ui5-toast>
			</ui5-user-settings-view>
			<ui5-user-settings-view text="Reset All Settings">
				<ui5-button id="resetAll">Reset All Settings content</ui5-button>
				<ui5-toast id="toastResetAll">All changes Reset.</ui5-toast>
			</ui5-user-settings-view>
		</ui5-user-settings-item>
	</ui5-user-settings-dialog>

	<ui5-dialog id="additionalDialog" state="Information" header-text="Change Display Language">
		<ui5-text>Changing the display language to [New Language] will update the language across the user interface.</ui5-text>
		<ui5-toolbar slot="footer">
			<ui5-toolbar-button
					class="dialogCloser"
					design="Emphasized"
					text="Change Language">
			</ui5-toolbar-button>
			<ui5-toolbar-button
					class="dialogCloser"
					design="Transparent"
					text="Cancel">
			</ui5-toolbar-button>
		</ui5-toolbar>
	</ui5-dialog>


	<!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
